@charset "utf-8";
/*.keyframes(Breath,{
	0% {
		.transition(scale(0.8,0.8));
	}
	100% {
		.transition(scale(1.1,1.1));
	}
});*/
/*.animation(Breath 0.8s ease-in-out alternate infinite);*/
html,
body {
  width: 100%;
  height: 100%;
  background-color: #000;
}
img {
  display: block;
  width: 100%;
  height: auto;
}
.loading {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  background: #000;
}
.loading .load {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.loading .load-txt {
  width: 3rem;
  height: 0.6rem;
  color: white;
  font-size: 0.48rem;
  letter-spacing: 1.5px;
  text-align: center;
  margin-top: 0.2rem;
  /* -webkit-animation: fade 2s infinite;
        -moz-animation: fade 2s infinite; */
}
.stick {
  width: 0.6rem;
  height: 0.1rem;
  background: white;
  display: inline-block;
  margin-left: -8px;
}
.stick:nth-child(n) {
  transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  /* IE 9 */
  -webkit-transform: rotate(30deg);
  /* Safari and Chrome */
  -moz-transform: rotate(30deg);
  -webkit-animation: fall 2s infinite;
  -moz-animation: fall 2s infinite;
}
.stick:nth-child(2n) {
  transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  /* IE 9 */
  -webkit-transform: rotate(-30deg);
  /* Safari and Chrome */
  -moz-transform: rotate(-30deg);
  -webkit-animation: rise 2s infinite;
  -moz-animation: rise 2s infinite;
}
@-webkit-keyframes rise {
  50% {
    transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    /* IE 9 */
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
  }
}
@-moz-keyframes rise {
  50% {
    transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    /* IE 9 */
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
  }
}
@-o-keyframes rise {
  50% {
    transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    /* IE 9 */
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
  }
  @keyframes rise {
    50% {
      transform: rotate(30deg);
      -ms-transform: rotate(30deg);
      /* IE 9 */
      -webkit-transform: rotate(30deg);
      -moz-transform: rotate(30deg);
    }
  }
}
@-webkit-keyframes fall {
  50% {
    transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    /* IE 9 */
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(30deg);
  }
}
@-moz-keyframes fall {
  50% {
    transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    /* IE 9 */
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
  }
}
@-o-keyframes fall {
  50% {
    transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    /* IE 9 */
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(30deg);
  }
  @keyframes fall {
    50% {
      transform: rotate(-30deg);
      -ms-transform: rotate(-30deg);
      /* IE 9 */
      -webkit-transform: rotate(-30deg);
      -moz-transform: rotate(30deg);
    }
  }
}
@-webkit-keyframes fade {
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes fade {
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes fade {
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  @keyframes fade {
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 1;
    }
  }
}
.wrap,
.swiper-container,
.swiper-slide {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  overflow: hidden;
}
/*第一屏*/
.swiper-slide1 {
  background: url("../images/page1-bg_2638a21.png") no-repeat;
  background-size: 100% 100%;
}
.logo {
  width: 3.95rem;
  height: 1.54rem;
  margin: 0.06rem auto 0;
  background: url("../images/page1-logo_58aae78.png") no-repeat;
  background-size: cover;
}
.guide-text {
  text-align: center;
}
.guide-text1 {
  font-size: 0.6rem;
  line-height: 1rem;
  font-weight: bold;
  color: #644a14;
  text-shadow: 0 0.01rem 0 #e1ad44;
}
.guide-text2 {
  font-size: 0.5rem;
  line-height: 0.8rem;
  font-weight: bold;
  color: #2e2615;
  text-shadow: 0 0.01rem 0 #e1ad44;
}
.guide-text3 {
  font-size: 0.62rem;
  color: #1b1b34;
  line-height: 1rem;
}
.fei1 {
  width: 0.85rem;
  height: 0.38rem;
  position: absolute;
  left: 0.4rem;
  top: 0.92rem;
  background: url("../images/page1-n1_9f287b1.png") no-repeat;
  background-size: cover;
}
.fei2 {
  width: 1.13rem;
  height: 0.79rem;
  position: absolute;
  right: 0.4rem;
  top: 0.7rem;
  background: url("../images/page1-n2_21faa46.png") no-repeat;
  background-size: cover;
}
.fei3 {
  width: 1.25rem;
  height: 0.87rem;
  position: absolute;
  left: 0.24rem;
  top: 4.6rem;
  background: url("../images/page1-n3_97a31ab.png") no-repeat;
  background-size: cover;
}
.fei4 {
  width: 1.16rem;
  height: 0.93rem;
  position: absolute;
  right: 0.24rem;
  top: 4.64rem;
  background: url("../images/page1-n4_c77ff73.png") no-repeat;
  background-size: cover;
}
.hold {
  width: 100%;
  height: 5.75rem;
  position: absolute;
  bottom: 0;
  background: url("../images/page1-n5_fe4c793.png") no-repeat;
  background-size: 100% 100%;
}
.next-page {
  width: 0.48rem;
  height: 0.36rem;
  position: absolute;
  bottom: 0.3rem;
  left: 50%;
  margin-left: -0.24rem;
  background: url("../images/nextPage_d87485a.png") no-repeat;
  background-size: cover;
  -webkit-animation: fadeInUp 1.5s linear 0s infinite normal none;
  -moz-animation: fadeInUp 1.5s linear 0s infinite normal none;
  -ms-animation: fadeInUp 1.5s linear 0s infinite normal none;
  animation: fadeInUp 1.5s linear 0s infinite normal none;
}
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    transform: none;
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, -0.4rem, 0);
    -moz-transform: translate3d(0, -0.4rem, 0);
    -ms-transform: translate3d(0, -0.4rem, 0);
    transform: translate3d(0, -0.4rem, 0);
  }
}
@-moz-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    transform: none;
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, -0.4rem, 0);
    -moz-transform: translate3d(0, -0.4rem, 0);
    -ms-transform: translate3d(0, -0.4rem, 0);
    transform: translate3d(0, -0.4rem, 0);
  }
}
@-ms-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    transform: none;
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, -0.4rem, 0);
    -moz-transform: translate3d(0, -0.4rem, 0);
    -ms-transform: translate3d(0, -0.4rem, 0);
    transform: translate3d(0, -0.4rem, 0);
  }
}
@-o-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    transform: none;
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, -0.4rem, 0);
    -moz-transform: translate3d(0, -0.4rem, 0);
    -ms-transform: translate3d(0, -0.4rem, 0);
    transform: translate3d(0, -0.4rem, 0);
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    transform: none;
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, -0.4rem, 0);
    -moz-transform: translate3d(0, -0.4rem, 0);
    -ms-transform: translate3d(0, -0.4rem, 0);
    transform: translate3d(0, -0.4rem, 0);
  }
}
/*第二屏*/
.swiper-slide2 {
  background: url("../images/page2-bg_72c869f.png") no-repeat;
  background-size: 100% 100%;
}
.stop-swiping {
  width: 100%;
  height: 100%;
}
.bigTk {
  width: 4.08rem;
  height: 5.25rem;
  margin: 0 auto;
  position: relative;
  background: url("../images/page2-bigTk_1f25eb2.png") no-repeat;
  background-size: cover;
}
.cannonCen {
  width: 2.59rem;
  height: 4.43rem;
  position: absolute;
  left: 50%;
  top: 1.2rem;
  margin-left: -1.295rem;
  background: url("../images/page2-cannonCen_0ffff10.png") no-repeat;
  background-size: cover;
  /* .animation(cannonCen 1.5s infinite) */
  -webkit-animation: cannonCen 3.5s linear infinite;
  -moz-animation: cannonCen 3.5s linear infinite;
  -ms-animation: cannonCen 3.5s linear infinite;
  animation: cannonCen 3.5s linear infinite;
}
.cannonLeft {
  width: 0.64rem;
  height: 0.84rem;
  position: absolute;
  left: 0.7rem;
  bottom: 1.16rem;
  background: url("../images/page2-cannonLeft_606f3a7.png") no-repeat;
  background-size: cover;
  -webkit-animation: cannonLeft 3.5s linear infinite;
  -moz-animation: cannonLeft 3.5s linear infinite;
  -ms-animation: cannonLeft 3.5s linear infinite;
  animation: cannonLeft 3.5s linear infinite;
}
.cannonRight {
  width: 0.64rem;
  height: 0.84rem;
  position: absolute;
  right: 0.7rem;
  bottom: 1.16rem;
  background: url("../images/page2-cannonRight_0fb7f60.png") no-repeat;
  background-size: cover;
  -webkit-animation: cannonRight 3.5s linear infinite;
  -moz-animation: cannonRight 3.5s linear infinite;
  -ms-animation: cannonRight 3.5s linear infinite;
  animation: cannonRight 3.5s linear infinite;
}
.click-btn {
  width: 2rem;
  height: 2rem;
  position: absolute;
  left: 50%;
  top: 1.0rem;
  z-index: 99;
  margin-left: -1rem;
}
.click-btn:after {
  content: "";
  display: block;
  width: 2rem;
  height: 2rem;
  background: url("../images/click-btn_3f56329.png") no-repeat;
  background-size: 100% 100%;
  -webkit-animation: jb 2s infinite;
  -moz-animation: jb 2s infinite;
  -ms-animation: jb 2s infinite;
  animation: jb 2s infinite;
}
.boom {
  -webkit-animation: boom 0.5s;
  -moz-animation: boom 0.5s;
  -ms-animation: boom 0.5s;
  animation: boom 0.5s;
}
.boom-n1 {
  position: absolute;
  left: 0.4rem;
  bottom: 2rem;
  width: 0.88rem;
  height: 0.72rem;
  background: url("../images/page2-boom1_bb7b1d6.png") no-repeat;
  background-size: 100% 100%;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  opacity: 0;
}
.boom-n2 {
  position: absolute;
  right: 0.2rem;
  top: 0.8rem;
  width: 1.45rem;
  height: 1.13rem;
  background: url("../images/page2-boom2_b68f72e.png") no-repeat;
  background-size: 100% 100%;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  opacity: 0;
}
.boom-n3 {
  position: absolute;
  right: 0.2rem;
  bottom: 0.8rem;
  width: 1.68rem;
  height: 1.52rem;
  background: url("../images/page2-boom3_99b5498.png") no-repeat;
  background-size: 100% 100%;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  opacity: 0;
}
.boom-n4 {
  position: absolute;
  left: 0.2rem;
  top: 1rem;
  width: 3.54rem;
  height: 2.89rem;
  background: url("../images/page2-boom4_bd41b54.png") no-repeat;
  background-size: 100% 100%;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  opacity: 0;
}
@-webkit-keyframes jb {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes jb {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-ms-keyframes jb {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes jb {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes jb {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes boom {
  to {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@-moz-keyframes boom {
  to {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@-ms-keyframes boom {
  to {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@-o-keyframes boom {
  to {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes boom {
  to {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes cannonCen {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  33% {
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  66% {
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@-moz-keyframes cannonCen {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  33% {
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  66% {
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@-ms-keyframes cannonCen {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  33% {
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  66% {
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@-o-keyframes cannonCen {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  33% {
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  66% {
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@keyframes cannonCen {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  33% {
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  66% {
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@-webkit-keyframes cannonLeft {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  33% {
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    -ms-transform: rotate(4deg);
    transform: rotate(4deg);
  }
  66% {
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    transform: rotate(-30deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@-moz-keyframes cannonLeft {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  33% {
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    -ms-transform: rotate(4deg);
    transform: rotate(4deg);
  }
  66% {
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    transform: rotate(-30deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@-ms-keyframes cannonLeft {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  33% {
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    -ms-transform: rotate(4deg);
    transform: rotate(4deg);
  }
  66% {
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    transform: rotate(-30deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@-o-keyframes cannonLeft {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  33% {
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    -ms-transform: rotate(4deg);
    transform: rotate(4deg);
  }
  66% {
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    transform: rotate(-30deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@keyframes cannonLeft {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  33% {
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    -ms-transform: rotate(4deg);
    transform: rotate(4deg);
  }
  66% {
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    transform: rotate(-30deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@-webkit-keyframes cannonRight {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  33% {
    -webkit-transform: rotate(-4deg);
    -moz-transform: rotate(-4deg);
    -ms-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }
  66% {
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@-moz-keyframes cannonRight {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  33% {
    -webkit-transform: rotate(-4deg);
    -moz-transform: rotate(-4deg);
    -ms-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }
  66% {
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@-ms-keyframes cannonRight {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  33% {
    -webkit-transform: rotate(-4deg);
    -moz-transform: rotate(-4deg);
    -ms-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }
  66% {
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@-o-keyframes cannonRight {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  33% {
    -webkit-transform: rotate(-4deg);
    -moz-transform: rotate(-4deg);
    -ms-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }
  66% {
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@keyframes cannonRight {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  33% {
    -webkit-transform: rotate(-4deg);
    -moz-transform: rotate(-4deg);
    -ms-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }
  66% {
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@-webkit-keyframes zd {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(0, -7.1rem);
    -moz-transform: translate(0, -7.1rem);
    -ms-transform: translate(0, -7.1rem);
    transform: translate(0, -7.1rem);
    opacity: 1;
  }
}
@-moz-keyframes zd {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(0, -7.1rem);
    -moz-transform: translate(0, -7.1rem);
    -ms-transform: translate(0, -7.1rem);
    transform: translate(0, -7.1rem);
    opacity: 1;
  }
}
@-ms-keyframes zd {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(0, -7.1rem);
    -moz-transform: translate(0, -7.1rem);
    -ms-transform: translate(0, -7.1rem);
    transform: translate(0, -7.1rem);
    opacity: 1;
  }
}
@-o-keyframes zd {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(0, -7.1rem);
    -moz-transform: translate(0, -7.1rem);
    -ms-transform: translate(0, -7.1rem);
    transform: translate(0, -7.1rem);
    opacity: 1;
  }
}
@keyframes zd {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(0, -7.1rem);
    -moz-transform: translate(0, -7.1rem);
    -ms-transform: translate(0, -7.1rem);
    transform: translate(0, -7.1rem);
    opacity: 1;
  }
}
@-webkit-keyframes TB {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, -0.2rem);
    -moz-transform: translate(0, -0.2rem);
    -ms-transform: translate(0, -0.2rem);
    transform: translate(0, -0.2rem);
  }
  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-moz-keyframes TB {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, -0.2rem);
    -moz-transform: translate(0, -0.2rem);
    -ms-transform: translate(0, -0.2rem);
    transform: translate(0, -0.2rem);
  }
  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-ms-keyframes TB {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, -0.2rem);
    -moz-transform: translate(0, -0.2rem);
    -ms-transform: translate(0, -0.2rem);
    transform: translate(0, -0.2rem);
  }
  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-o-keyframes TB {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, -0.2rem);
    -moz-transform: translate(0, -0.2rem);
    -ms-transform: translate(0, -0.2rem);
    transform: translate(0, -0.2rem);
  }
  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@keyframes TB {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, -0.2rem);
    -moz-transform: translate(0, -0.2rem);
    -ms-transform: translate(0, -0.2rem);
    transform: translate(0, -0.2rem);
  }
  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-webkit-keyframes hzl {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, 0.2rem);
    -moz-transform: translate(0, 0.2rem);
    -ms-transform: translate(0, 0.2rem);
    transform: translate(0, 0.2rem);
  }
  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-moz-keyframes hzl {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, 0.2rem);
    -moz-transform: translate(0, 0.2rem);
    -ms-transform: translate(0, 0.2rem);
    transform: translate(0, 0.2rem);
  }
  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-ms-keyframes hzl {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, 0.2rem);
    -moz-transform: translate(0, 0.2rem);
    -ms-transform: translate(0, 0.2rem);
    transform: translate(0, 0.2rem);
  }
  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-o-keyframes hzl {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, 0.2rem);
    -moz-transform: translate(0, 0.2rem);
    -ms-transform: translate(0, 0.2rem);
    transform: translate(0, 0.2rem);
  }
  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@keyframes hzl {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, 0.2rem);
    -moz-transform: translate(0, 0.2rem);
    -ms-transform: translate(0, 0.2rem);
    transform: translate(0, 0.2rem);
  }
  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
.page2-tip {
  text-align: center;
  font-size: 0.5rem;
  color: #fff;
  margin-top: 0.5rem;
}
.smallTk {
  width: 100%;
  height: 1.5rem;
  position: absolute;
  bottom: 0.7rem;
}
.smallTk .sk {
  margin: 0 auto;
  width: 0.99rem;
  height: 1.2rem;
}
.smallTk .sk:after {
  content: "";
  display: block;
  width: 0.16rem;
  height: 0.42rem;
  margin: 0 auto;
  opacity: 0;
  background: url("../images/page2-zd_0ce769c.png") no-repeat center;
}
.smallTk .zd:after {
  -webkit-animation: zd 0.5s;
  -moz-animation: zd 0.5s;
  -ms-animation: zd 0.5s;
  animation: zd 0.5s;
}
.smallTk .smallTk1 {
  /* background: url("../images/page2-smallTk1.png") no-repeat center;
        background-size: 100% 100%; */
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  transform: rotate(10deg);
}
.smallTk .smallTk2 {
  /* background: url("../images/page2-smallTk2.png") no-repeat center;
        background-size: 100% 100%; */
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  transform: rotate(5deg);
  /* &:after{
            .animation(zd-n1 1s infinite);
        } */
}
.smallTk .smallTk3 {
  /* background: url("../images/page2-smallTk3.png") no-repeat center;
        background-size: 100% 100%; */
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  transform: rotate(-5deg);
  /* &:after{
            .animation(zd-n1 1s infinite);
        } */
}
.smallTk .smallTk4 {
  /* background: url("../images/page2-smallTk4.png") no-repeat center;
        background-size: 100% 100%; */
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  transform: rotate(-10deg);
  /* &:after{
            .animation(zd-n1 1s infinite);
        } */
}
.smallTk .sm {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.smallTk .hzl {
  -webkit-animation: hzl 0.5s;
  -moz-animation: hzl 0.5s;
  -ms-animation: hzl 0.5s;
  animation: hzl 0.5s;
}
.smallTk .smallTkImg1 {
  background: url("../images/page2-smallTk1_0297d45.png") no-repeat center;
  background-size: 100% 100%;
}
.smallTk .smallTkImg2 {
  background: url("../images/page2-smallTk2_b694b85.png") no-repeat center;
  background-size: 100% 100%;
}
.smallTk .smallTkImg3 {
  background: url("../images/page2-smallTk3_84c7b31.png") no-repeat center;
  background-size: 100% 100%;
}
.smallTk .smallTkImg4 {
  background: url("../images/page2-smallTk4_d77f37b.png") no-repeat center;
  background-size: 100% 100%;
}
.page2-end {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99;
  width: 100%;
  height: 100%;
  background: url("../images/page2-end_3ad7132.jpg") no-repeat;
  background-size: 100% 100%;
  display: none;
}
/*第三屏*/
.swiper-slide3 {
  background: url("../images/page3-bg_779fb16.png") no-repeat;
  background-size: 100% 100%;
}
.page3-tit {
  width: 4.69rem;
  height: 2.21rem;
  margin: 0.34rem auto 0;
  background: url("../images/page3-tit_242b17e.png") no-repeat;
  background-size: 100% 100%;
}
.page3-main {
  width: 100%;
  height: 6.54rem;
  position: relative;
}
.page3-main .left {
  width: 1.12rem;
  height: 1.05rem;
  position: absolute;
  top: 0.86rem;
  left: 0.46rem;
  background: url("../images/page3-n2_b00d2ec.png") no-repeat;
  background-size: 100%;
  -webkit-animation: cannonRight 2s infinite;
  -moz-animation: cannonRight 2s infinite;
  -ms-animation: cannonRight 2s infinite;
  animation: cannonRight 2s infinite;
}
.page3-main .right {
  width: 1.24rem;
  height: 1.26rem;
  position: absolute;
  right: 0.5rem;
  top: 0.8rem;
  background: url("../images/page3-n3_4501cd6.png") no-repeat;
  background-size: 100%;
  -webkit-animation: jb 2s infinite;
  -moz-animation: jb 2s infinite;
  -ms-animation: jb 2s infinite;
  animation: jb 2s infinite;
}
.page3-goddess {
  width: 4.97rem;
  height: 6.54rem;
  margin: 0 auto;
  background: url("../images/page3-goddess_6dbef6d.png") no-repeat;
  background-size: 100% 100%;
  -webkit-animation: goddess 3.5s linear infinite;
  -moz-animation: goddess 3.5s linear infinite;
  -ms-animation: goddess 3.5s linear infinite;
  animation: goddess 3.5s linear infinite;
}
.page3-ft {
  width: 4.69rem;
  height: 2.11rem;
  margin: 0 auto;
  background: url("../images/page3-n1_32fc5d0.png") no-repeat;
  background-size: 100% 100%;
}
.audio-box {
  width: 2.6rem;
  height: 1.62rem;
  position: absolute;
  right: 0;
  top: 3.0rem;
}
.audio-box .audio-tit {
  line-height: 0.30rem;
  margin-left: 0.24rem;
  font-size: 0.22rem;
  color: #0074b0;
}
.audio-box .audio-bg {
  float: left;
  width: 2.0rem;
  height: 0.67rem;
  background: url("../images/page3-n4_58ab73d.png") no-repeat;
  background-size: 100% 100%;
}
.audio-box .time {
  float: left;
  line-height: 0.67rem;
  font-size: 0.34rem;
  color: #0090db;
  text-shadow: #ffffff 0.02rem 0 0, #ffffff 0 0.02rem 0, #ffffff -0.02rem 0 0, #ffffff 0 -0.02rem 0;
}
.audio-box .play {
  width: 0.75rem;
  height: 1.12rem;
  position: absolute;
  left: .85rem;
  top: 0.4rem;
  background: url("../images/page3-n5_b208fc3.png") no-repeat;
  background-size: 100% 100%;
  -webkit-animation: jb 1.4s infinite;
  -moz-animation: jb 1.4s infinite;
  -ms-animation: jb 1.4s infinite;
  animation: jb 1.4s infinite;
}
@-webkit-keyframes goddess {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  33% {
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  66% {
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@-moz-keyframes goddess {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  33% {
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  66% {
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@-ms-keyframes goddess {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  33% {
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  66% {
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@-o-keyframes goddess {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  33% {
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  66% {
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@keyframes goddess {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  33% {
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  66% {
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
/*第四屏*/
.swiper-slide4 {
  background: url("../images/page4-bg_3fcda85.png") no-repeat;
  background-size: cover;
}
.desc {
  width: 98%;
  height: 6.27rem;
  overflow: hidden;
  margin: 0.18rem auto 0;
  background: url("../images/page4-n2_7a266fd.png") no-repeat;
  background-size: 100% 100%;
}
.desc img {
  width: 4.52rem;
  height: 2.44rem;
  margin: 1rem auto 0;
}
.avatar-box {
  width: 100%;
  height: 3.4rem;
  position: absolute;
  top: 3.7rem;
}
.avatar-box .avatar-list {
  width: 1.4rem;
  height: 1.4rem;
  border: 0.04rem #94b1d1 solid;
  border-radius: 100%;
  overflow: hidden;
  position: absolute;
}
.avatar-box .avatar-list-n1 {
  left: 0.1rem;
  top: 1.42rem;
}
.avatar-box .avatar-list-n2 {
  left: 1.44rem;
  top: 0.4rem;
}
.avatar-box .avatar-list-n3 {
  left: 1.6rem;
  top: 2rem;
}
.avatar-box .avatar-list-n4 {
  right: 0.86rem;
  top: 0;
}
.avatar-box .avatar-list-n5 {
  right: 1.8rem;
  top: 1.4rem;
}
.avatar-box .avatar-list-n6 {
  right: 0.2rem;
  top: 1.64rem;
}
.body {
  width: 4.05rem;
  height: 4.75rem;
  position: absolute;
  left: 50%;
  bottom: 1.2rem;
  margin-left: -2.025rem;
  background: url("../images/page4-n4_154c1e7.png") no-repeat;
  background-size: 100% 100%;
}
.body .left {
  width: 1.275rem;
  height: 1.56rem;
  position: absolute;
  left: -0.1rem;
  top: 1.25rem;
  background: url("../images/page4-n5_e27ac67.png") no-repeat;
  background-size: 100% 100%;
  -webkit-animation: handL 1.4s infinite;
  -moz-animation: handL 1.4s infinite;
  -ms-animation: handL 1.4s infinite;
  animation: handL 1.4s infinite;
}
.body .right {
  width: 1.38rem;
  height: 1.48rem;
  position: absolute;
  right: 0;
  top: 0.6rem;
  background: url("../images/page4-n6_e9138f5.png") no-repeat;
  background-size: 100% 100%;
  -webkit-animation: handR 1.4s infinite;
  -moz-animation: handR 1.4s infinite;
  -ms-animation: handR 1.4s infinite;
  animation: handR 1.4s infinite;
}
.mass {
  width: 100%;
  height: 2.2rem;
  position: absolute;
  bottom: -0.4rem;
}
.mass:after {
  content: "";
  display: block;
  width: 100%;
  height: 2.2rem;
  background: url("../images/page4-n3_a39a4b5.png") no-repeat;
  background-size: 100% 100%;
  -webkit-animation: mass 2s infinite;
  -moz-animation: mass 2s infinite;
  -ms-animation: mass 2s infinite;
  animation: mass 2s infinite;
}
/*左手动画*/
@-webkit-keyframes handL {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@-moz-keyframes handL {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@-ms-keyframes handL {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@-o-keyframes handL {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@keyframes handL {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@-webkit-keyframes handR {
  0% {
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
}
@-moz-keyframes handR {
  0% {
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
}
@-ms-keyframes handR {
  0% {
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
}
@-o-keyframes handR {
  0% {
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
}
@keyframes handR {
  0% {
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
}
@-webkit-keyframes mass {
  0% {
    -webkit-transform: translate(0, 0.1rem);
    -moz-transform: translate(0, 0.1rem);
    -ms-transform: translate(0, 0.1rem);
    transform: translate(0, 0.1rem);
  }
  50% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, 0.1rem);
    -moz-transform: translate(0, 0.1rem);
    -ms-transform: translate(0, 0.1rem);
    transform: translate(0, 0.1rem);
  }
}
@-moz-keyframes mass {
  0% {
    -webkit-transform: translate(0, 0.1rem);
    -moz-transform: translate(0, 0.1rem);
    -ms-transform: translate(0, 0.1rem);
    transform: translate(0, 0.1rem);
  }
  50% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, 0.1rem);
    -moz-transform: translate(0, 0.1rem);
    -ms-transform: translate(0, 0.1rem);
    transform: translate(0, 0.1rem);
  }
}
@-ms-keyframes mass {
  0% {
    -webkit-transform: translate(0, 0.1rem);
    -moz-transform: translate(0, 0.1rem);
    -ms-transform: translate(0, 0.1rem);
    transform: translate(0, 0.1rem);
  }
  50% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, 0.1rem);
    -moz-transform: translate(0, 0.1rem);
    -ms-transform: translate(0, 0.1rem);
    transform: translate(0, 0.1rem);
  }
}
@-o-keyframes mass {
  0% {
    -webkit-transform: translate(0, 0.1rem);
    -moz-transform: translate(0, 0.1rem);
    -ms-transform: translate(0, 0.1rem);
    transform: translate(0, 0.1rem);
  }
  50% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, 0.1rem);
    -moz-transform: translate(0, 0.1rem);
    -ms-transform: translate(0, 0.1rem);
    transform: translate(0, 0.1rem);
  }
}
@keyframes mass {
  0% {
    -webkit-transform: translate(0, 0.1rem);
    -moz-transform: translate(0, 0.1rem);
    -ms-transform: translate(0, 0.1rem);
    transform: translate(0, 0.1rem);
  }
  50% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, 0.1rem);
    -moz-transform: translate(0, 0.1rem);
    -ms-transform: translate(0, 0.1rem);
    transform: translate(0, 0.1rem);
  }
}
/*第五屏*/
.swiper-slide5 {
  background: url("../images/page5-bg_ece1d2d.png") no-repeat;
  background-size: 100% 100%;
}
.top-bg {
  position: absolute;
  top: 0;
  width: 100%;
  height: 5.75rem;
  background: url("../images/page5-n1_921bed6.png") no-repeat;
  background-size: 100% 100%;
}
.down-box {
  width: 3.19rem;
  margin: 0 auto;
}
.down-box .down-tit {
  width: 3.19rem;
  height: 0.46rem;
  margin: 22px 0;
  background: url("../images/page5-n2_b192e4d.png") no-repeat;
  background-size: 100% 100%;
}
.down-box .down-list {
  width: 3.19rem;
  height: 0.88rem;
  margin-bottom: 0.22rem;
}
.down-box .down-list:nth-child(2) {
  background: url("../images/page5-n3_450a807.png") no-repeat;
  background-size: 100% 100%;
}
.down-box .down-list:nth-child(3) {
  background: url("../images/page5-n4_a00a3a9.png") no-repeat;
  background-size: 100% 100%;
}
.focus {
  width: 6.13rem;
  height: 2.1rem;
  margin: 0 auto;
  background: url("../images/page5-n5_e2a3a6f.png") no-repeat;
  background-size: 100% 100%;
}
.aobama {
  width: 100%;
  height: 6.02rem;
  position: absolute;
  left: 0;
  bottom: 0;
  background: url("../images/page5-n6_56c65ce.png") no-repeat;
  background-size: 100% 100%;
}
.aobama .touch {
  width: 2.0rem;
  height: 2.5rem;
  position: absolute;
  right: 0.34rem;
  top: 0.7rem;
}
.aobama .touch p {
  font-size: 0.3rem;
  line-height: 0.46rem;
  text-align: center;
  color: #000;
  font-weight: bold;
}
.aobama .touch .touch-btn {
  width: 2.0rem;
  height: 2.0rem;
  border-radius: 100%;
  position: relative;
  background: url("../images/page5-n7_cb2a9fc.png") no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
}
.aobama .touch .touch-btn.zw {
  -webkit-animation: zw 2.4s infinite;
  -moz-animation: zw 2.4s infinite;
  -ms-animation: zw 2.4s infinite;
  animation: zw 2.4s infinite;
}
.aobama .touch .touch-btn .line {
  width: 2rem;
  height: 0.2rem;
  position: absolute;
  left: 0;
  top: -0.2rem;
  z-index: 100;
  background: url("../images/page5-n8_13fc2ea.png") no-repeat;
  background-size: 100% 100%;
}
.aobama .touch .touch-btn .line.line-re {
  -webkit-animation: line 2.54s;
  -moz-animation: line 2.54s;
  -ms-animation: line 2.54s;
  animation: line 2.54s;
}
.aobama .touch .touch-btn .touch-alp {
  width: 2rem;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 90;
  background: url("../images/page5-n9_7a4dd95.png") no-repeat left top;
  background-size: 100%;
}
.aobama .touch .touch-btn .touch-alp.touch-re {
  -webkit-animation: touch-re 2.4s;
  -moz-animation: touch-re 2.4s;
  -ms-animation: touch-re 2.4s;
  animation: touch-re 2.4s;
}
@-webkit-keyframes zw {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes zw {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@-ms-keyframes zw {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@-o-keyframes zw {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes zw {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes line {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(0, 2.2rem);
    -moz-transform: translate(0, 2.2rem);
    -ms-transform: translate(0, 2.2rem);
    transform: translate(0, 2.2rem);
    opacity: 0;
  }
}
@-moz-keyframes line {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(0, 2.2rem);
    -moz-transform: translate(0, 2.2rem);
    -ms-transform: translate(0, 2.2rem);
    transform: translate(0, 2.2rem);
    opacity: 0;
  }
}
@-ms-keyframes line {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(0, 2.2rem);
    -moz-transform: translate(0, 2.2rem);
    -ms-transform: translate(0, 2.2rem);
    transform: translate(0, 2.2rem);
    opacity: 0;
  }
}
@-o-keyframes line {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(0, 2.2rem);
    -moz-transform: translate(0, 2.2rem);
    -ms-transform: translate(0, 2.2rem);
    transform: translate(0, 2.2rem);
    opacity: 0;
  }
}
@keyframes line {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(0, 2.2rem);
    -moz-transform: translate(0, 2.2rem);
    -ms-transform: translate(0, 2.2rem);
    transform: translate(0, 2.2rem);
    opacity: 0;
  }
}
@-webkit-keyframes touch-re {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    height: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    height: 100%;
  }
}
@-moz-keyframes touch-re {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    height: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    height: 100%;
  }
}
@-ms-keyframes touch-re {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    height: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    height: 100%;
  }
}
@-o-keyframes touch-re {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    height: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    height: 100%;
  }
}
@keyframes touch-re {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    height: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    height: 100%;
  }
}
